import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);

// 通用页面：不需要守卫，可直接访问
export const constRoutes = [
  {
    path: "/login",
    component: () => import("@/views/Login"),
    hidden: true, // 导航菜单忽略该项
  },
  {
    path: "/",
    component: () => import(/* webpackChunkName: "home" */ "@/views/Home.vue"),
    name: "home",
    meta: {
      title: "Home", // 导航菜单项标题
      icon: "home",
    },
  },
  {
    path: "/contact",
    component: () => import("@/views/Contact"),
    meta: {
      title: "Contact",
      icon: "contact",
    },
    children: [
      {
        path: "contact-us",
        component: {
          render(h) {
            return h("div", "contact-us");
          },
        },
        meta: {
          title: "Contact-Us",
          icon: "contact",
        },
      },
    ],
  },
];

// 权限页面：受保护页面，要求用户登录并拥有访问权限的角色才能访问
export const asyncRoutes = [
  {
    path: "/about",
    component: () => import(/* webpackChunkName: "home" */ "@/views/About.vue"),
    name: "about",
    meta: {
      title: "About",
      icon: "about",
      roles: ["admin", "editor"],
    },
    children: [
      {
        path: "about-all",
        component: {
          render(h) {
            return h("div", "about-all");
          },
        },
        meta: {
          title: "All",
          icon: "all",
          roles: ["admin", "editor"],
        },
      },
      {
        path: "about-admin",
        component: {
          render(h) {
            return h("div", "about-admin");
          },
        },
        meta: {
          title: "Admin",
          icon: "admin",
          roles: ["admin"],
        },
      },
      {
        path: "editor",
        component: {
          render(h) {
            return h("div", "about-editor");
          },
        },
        meta: {
          title: "Editor",
          icon: "editor",
          roles: ["editor"],
        },
      },
    ],
  },
  {
    path: "/user-center",
    component: () => import(/* webpackChunkName: "home" */ "@/views/User.vue"),
    name: "me",
    meta: {
      title: "Me",
      icon: "me",
      roles: ["admin", "editor"],
    },
  }
];

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: constRoutes,
});
